<template>
  <div class="f">
      <!-- 我是爸爸
      <hr>
      <Son/> -->
      <div class="box">
          <div class="nav">
            <div v-for='v,k in arr' :key="v.name" @click="tab(k)">
                {{v.name}}
            </div>
          </div>
          <div class="con">
              <Son v-if="isshow" :content="arr[t].name"/>
          </div>
      </div>
  </div>
</template>

<script>
import Son from "./Content.vue"
export default {
    name:"Title",
    data(){
        return{
            //  arr:[
            //      {name:"静夜思",content:"床前明月光，疑是地上霜"},
            //      {name:"咏鹅",content:"鹅，鹅，鹅，曲项向天歌"},
            //      {name:'登鹳雀楼',content:"白日依山尽，黄河入海流"}

            //  ],
              arr:[
                 {name:"静夜思"},
                 {name:"咏鹅"},
                 {name:'登鹳雀楼'}

             ],
             t:0,
             isshow:true
        }
    },
    components:{Son},
    methods:{
        tab(k){
            console.log(k)
            this.t=k
            this.isshow=false
            setTimeout(()=>{
                this.isshow=true
            })
        }
    }
}
</script>

<style>
  .box{
      width: 800px;
      height: 600px;
      margin: 0 auto;
      display: flex;
      border: 1px solid grey;
  }
  .nav{
      flex: 1;
      height: 100%;
      background: gray;
  }
  .con{
      flex: 4;
      height: 100%;
      background: gainsboro;
  }
  .nav>div{
      padding: 10px;
      cursor: pointer;
      font-size: 20px;
      color: white;
  }
</style>